<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"><link rel="icon" href="img/icon.jpg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=OZEoipk5UII7aZjwD4P4wGjLro2xXYRB"></script>
    <script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <title>最受欢迎农产品价格比较</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <style>
        body, html{
            width: 100%;
            height: 100%;
            margin:0;
            font-family:"微软雅黑";
        }
        #l-map{
            height:500px;
            width:100%;
        }
        #r-result{
            width:100%;
            font-size:14px;
            line-height:20px;
        }
    </style>
</head>
<body>
<header class="head">
    <h3 class="head_button" ><a href="/">首页</a></h3>
    <!--    <h3 class="head_button"><a href="/pie">饼状图</a></h3>-->
    <!--    <h3 class="head_button"><a href="/pre">预测页面</a></h3>-->
    <h3 class="head_button"><a href="/hurt">小麦病虫害</a></h3>
    <h3 class="head_button" ><a href="/mostLike" style="background-color: gray">最受欢迎农产品价格比较</a></h3>
    <h3 class="head_button" ><a href="/line">农业总产值预测</a></h3>
</header>
<section class="section">
<!--    <input type="number" id="length_l" placeholder="请填写公里数" value="5">km之内-->
    <div id="l-map"></div>
    <div id="r-result">
        <input type="button" value="获取农产品价格列表详情" onclick="bdGEO(0)" />
        <div id="result"></div>
    </div>
</section>
<script>
    // 百度地图API功能
    var map = new BMapGL.Map("l-map");
    map.centerAndZoom(new BMapGL.Point(121.465197,37.482984), 13);
    map.enableScrollWheelZoom(true);
    var index = 0;
    var myGeo = new BMapGL.Geocoder();
    var adds = [
        {name:'苹果',price:6.6,map:new BMapGL.Point(121.465197,37.482984)},
        {name:'苹果',price:6.7,map:new BMapGL.Point(121.475114,37.478746)},
        {name:'苹果',price:6.5,map:new BMapGL.Point(121.454704,37.476226)},
        {name:'苹果',price:6.3,map:new BMapGL.Point(121.492505,37.469353)},
        {name:'苹果',price:6.2,map:new BMapGL.Point(121.453555,37.49272)},
        {name:'苹果',price:6.1,map:new BMapGL.Point(121.394626,37.531306)},
        {name:'苹果',price:6.0,map:new BMapGL.Point(121.365305,37.529703)},
        {name:'苹果',price:6.6,map:new BMapGL.Point(121.442919,37.542065)}
    ];
    for(var i = 0; i<adds.length; i++){
        var marker = new BMapGL.Marker(adds[i].map);
        map.addOverlay(marker);
        marker.setLabel(new BMapGL.Label(adds[i].name+":"+adds[i].price+"(元)-坐标：i"+(i+1),{offset:new BMapGL.Size(10,-10)}));
    }
    function bdGEO(){
        var pt = adds[index].map;
        geocodeSearch(pt);
        index++;
    }
    function geocodeSearch(pt){
        if(index < adds.length-1){
            setTimeout(window.bdGEO,400);
        }
        myGeo.getLocation(pt, function(rs){
            var addComp = rs.addressComponents;
            document.getElementById("result").innerHTML += index + ". " +adds[index-1].map.lng + "," +
                adds[index-1].map.lat + "："  +
                "商圈(" + rs.business + ")  地址(" +
                addComp.province + ", " + addComp.city + ", " + addComp.district + ", " +
                addComp.street + ", " + addComp.streetNumber + ")<br/><br/>";
        });
    }


</script>
</body>
</html>